<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <form action="/sdf" @submit.prevent="handSubmit">
        <span>用户名：</span>
        <input type="text" v-model="username">
        <br>

        <span>密码：</span>
        <input type="password" v-model="pwd">
        <br>

        <span>性别：</span>
        <input type="radio" value="女" id="female" v-model="sex">
        <label for="female">女</label>
        <input type="radio" value="男" id="male" v-model="sex">
        <label for="male">男</label>
        <br>

        <span>爱好</span>
        <input type="checkbox" value="basket" id="basket" v-model="likes">
        <label for="basket">篮球</label>
        <input type="checkbox" value="foot" id="foot" v-model="likes">
        <label for="foot">足球</label>
        <input type="checkbox" value="pingpang" id="pingpang" v-model="likes">
        <label for="pingpang">乒乓球</label>
        <br>

        <span>城市：</span>
        <select v-model="cityId">
            <option value="">未选择</option>
            <option :value="item.id" v-for="item in allCitys" :key="item.id">{{item.name}}</option>
        </select>
        <br>

        <span>介绍</span>
        <textarea cols="30" rows="10" v-model="desc"></textarea>
        <br>

        <input type="submit" value="注册">
    </form>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            username:'',
            pwd:'',
            sex:'男',
            likes:['foot'],
            allCitys:[
                {id:1,name:'BJ'},
                {id:2,name:'GZ'},
                {id:3,name:'WH'}
            ],
            cityId:1,
            desc:''
        },
        methods:{
            handSubmit(){
                console.log(this.username,this.pwd,this.sex,this.likes,this.allCitys,this.cityId,this.desc)
            }
        }
    })
</script>
</body>
</html>
